<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Videos</title>
</head>
<body>
    <p>总播放时间为：<span id="totaltime"></span></p>
    <ul class="videos">
        <li data-time="5:43">Video 1 时长是：5:43</li>
        <li data-time="2:33">Video 2 时长是：2:33</li>
        <li data-time="3:45">Video 3 时长是：3:45</li>
        <li data-time="0:47">Video 4 时长是：0:47</li>
        <li data-time="5:21">Video 5 时长是：5:21</li>
        <li data-time="6:56">Video 6 时长是：6:56</li>
        <li data-time="3:46">Video 7 时长是：3:46</li>
        <li data-time="5:25">Video 8 时长是：5:25</li>
        <li data-time="3:14">Video 9 时长是：3:14</li>
        <li data-time="3:31">Video 10 时长是：3:31</li>
        <li data-time="5:59">Video 11 时长是：5:59</li>
        <li data-time="3:07">Video 12 时长是：3:07</li>
        <li data-time="11:29">Video 13 时长是：11:29</li>
        <li data-time="8:57">Video 14 时长是：8:57</li>
        <li data-time="5:49">Video 15 时长是：5:49</li>
        <li data-time="5:52">Video 16 时长是：5:52</li>
        <li data-time="5:50">Video 17 时长是：5:50</li>
        <li data-time="9:13">Video 18 时长是：9:13</li>
        <li data-time="11:51">Video 19 时长是：11:51</li>
        <li data-time="7:58">Video 20 时长是：7:58</li>
        <li data-time="4:40">Video 21 时长是：4:40</li>
        <li data-time="4:45">Video 22 时长是：4:45</li>
        <li data-time="6:46">Video 23 时长是：6:46</li>
        <li data-time="7:24">Video 24 时长是：7:24</li>
        <li data-time="7:12">Video 25 时长是：7:12</li>
        <li data-time="5:23">Video 26 时长是：5:23</li>
        <li data-time="3:34">Video 27 时长是：3:34</li>
        <li data-time="8:22">Video 28 时长是：8:22</li>
        <li data-time="5:17">Video 29 时长是：5:17</li>
        <li data-time="3:10">Video 30 时长是：3:10</li>
        <li data-time="4:43">Video 31 时长是：4:43</li>
        <li data-time="19:43">Video 32 时长是：19:43</li>
        <li data-time="0:47">Video 33 时长是：0:47</li>
        <li data-time="0:47">Video 34 时长是：0:47</li>
        <li data-time="3:14">Video 35 时长是：3:14</li>
        <li data-time="3:59">Video 36 时长是：3:59</li>
        <li data-time="2:43">Video 37 时长是：2:43</li>
        <li data-time="4:17">Video 38 时长是：4:17</li>
        <li data-time="6:56">Video 39 时长是：6:56</li>
        <li data-time="3:05">Video 40 时长是：3:05</li>
        <li data-time="2:06">Video 41 时长是：2:06</li>
        <li data-time="1:59">Video 42 时长是：1:59</li>
        <li data-time="1:49">Video 43 时长是：1:49</li>
        <li data-time="3:36">Video 44 时长是：3:36</li>
        <li data-time="7:10">Video 45 时长是：7:10</li>
        <li data-time="3:44">Video 46 时长是：3:44</li>
        <li data-time="3:44">Video 47 时长是：3:44</li>
        <li data-time="4:36">Video 48 时长是：4:36</li>
        <li data-time="3:16">Video 49 时长是：3:16</li>
        <li data-time="1:10">Video 50 时长是：1:10</li>
        <li data-time="6:10">Video 51 时长是：6:10</li>
        <li data-time="2:14">Video 52 时长是：2:14</li>
        <li data-time="3:44">Video 53 时长是：3:44</li>
        <li data-time="5:05">Video 54 时长是：5:05</li>
        <li data-time="6:03">Video 55 时长是：6:03</li>
        <li data-time="12:39">Video 56 时长是：12:39</li>
        <li data-time="1:56">Video 57 时长是：1:56</li>
        <li data-time="4:04">Video 58 时长是：4:04</li>
    </ul>

    <script>
        var liArray = Array.from(document.querySelectorAll('li'));
        var result = liArray.map(function (item) {
           var temp = item.dataset.time.split(':');
           return parseInt(temp[0], 10) * 60 + parseInt(temp[1], 10);
        }).reduce(function (a, b) {
           return a + b;
        }, 0);

        // 格式化显示时间
        function timeFormatter(seconds) {
            var sec = seconds % 60;
            var min = Math.floor((seconds / 60)) % 60;
            var hour = Math.floor(seconds / 3600);
            document.getElementById('totaltime').textContent = `${hour} 小时  ${min} 分 ${sec} 秒。`;
        }

        timeFormatter(result);
    </script>
</body>
</html>
